<template>
  <div class="pk-canvas">
    <div class="pk-canvas-order">
      <canvas ref="qrCanvas" style="display:none"></canvas>
      <img :src="imgsrc" />
      <div class="pk-canvas-ordercode">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, defineProps, watch } from 'vue';
import QRCode from 'qrcode';

const props = defineProps({
  width:{
    type:[String,Number],
    default: 200
  },
  height:{
    type:[String,Number],
    default: 200
  },
  modelValue:{
    type: Array,
    default: () => []
  }
})

const imgsrc = ref('')
const qrCanvas = ref(null);
const content = ref(props.modelValue);
 
watch(() => props.modelValue, (val) => {
  content.value = val
  getInit()
})

const getInit = () => {
  if (!content.value) {
    return
  }
  QRCode.toCanvas(qrCanvas.value, content.value, {
    height: props.height,
    width: props.width
  },error => {
    imgsrc.value = qrCanvas.value.toDataURL("image/png")
    console.log('error', qrCanvas.value.toDataURL("image/png"))
    if (error) console.error(error);
  });
}

onMounted(() => {
 setTimeout(() => {
  getInit()
 }, 100)
});
</script>
<style lang="scss"> 
.pk-canvas{
  &-order{
    // border:#ddd 1px solid;
    background: #fff;
    // padding: 12px;
  }
  &-ordercode{
    text-align: center;
    font-size: 12px;
    margin-bottom: 12px; 
    font-weight: bold;
  }
}
</style>